<template>
  <view class="price-info">
    <!-- 价格内容 -->
    <view class="price-row" v-for="(item, index) in priceList" :key="index">
      <view class="price-item price-item-label">
        <text>
          {{ item.label }}
        </text>
        <u-icon
          v-if="index === 0 || index === 1"
          name="question-circle-fill"
          color="rgba(200,200,200,1)"
          size="14"
          @click="handleOpenTimeTip(item.label)"
        >
        </u-icon>

        <u-icon
          v-if="index === 2"
          name="question-circle-fill"
          color="rgba(200,200,200,1)"
          size="14"
          @click="handleOpenTip"
        >
        </u-icon>
      </view>
      <view class="price-item price-item-content">
        <text class="number" v-if="index === 0">
          {{ (item.price * userRoleInfo.priceDiscount).toFixed(4) || 0 }}元
        </text>
        <text class="number" v-else-if="index === 1">
          {{ item.price * userRoleInfo.serviceDiscount || 0 }}元
        </text>
        <text class="number" v-else> {{ item.price || 0 }}元 </text>
        <text class="unit">/{{ item.unit }}</text>
      </view>
      <view class="price-item">{{ item.time }}</view>
    </view>
    <!-- {{ userRoleInfo }} -->
  </view>
  <u-popup v-model:show="show" mode="bottom" :round="20">
    <view class="pop-container">
      <view class="pop-title">超时占用费</view>
      <view class="pop-tip">
        非充电情况下占用车位/充电设备，将收取超时费用。充电结束后，请及时挪车，感谢您的理解和支持
      </view>
      <view class="table-title">通用</view>
      <!-- 表格结构 -->
      <view class="table">
        <view class="table-row">
          <view class="table-cell">30分钟以内含(30分钟)</view>
          <view class="table-cell">免费</view>
        </view>
        <view class="table-row">
          <view class="table-cell">超过30分钟</view>
          <view class="table-cell">0.30元分钟(200元封顶)</view>
        </view>
        <!-- 更多行... -->
      </view>
      <view class="label">什么是超时占用</view>
      <view class="paragraph">
        为了合理利用公共充电资源，让更多车主高效快捷地充电，对于已经,结束充电或未充电并长时间占用充电设备的车主，特来电将收取一定,的“超时占用费"。特来电旨在提升客户满意度，而非借此营利，感谢,您的理解和支持。
      </view>
      <view class="label">超时前的提醒</view>
      <view class="paragraph">
        超时前的提醒,特来电APP充电中页面，有详细的充电状态和进度。,当车辆即将充满时，车主会收到APP消息通知。,当电量完全充满时，车主会再次收到消息通知。,关注特来电微信公众号“qdteld”，同时可收到微信提醒。
      </view>
    </view>
  </u-popup>
  <u-popup v-model:show="priceTimeShow" mode="bottom" :round="20">
    <view class="price-time-data" v-for="(item, index) in arr" :key="index">
      <view class="price-time-data-time">{{ item.timeRange }}</view>
      <view class="price-time-data-fee">{{ item.cost }}元</view>
    </view>
    <view class="discount-tip-container">
      <view class="label">费用说明</view>
      <view class="paragraph">
        1.以上费用为正常费用，绑定工号后可享受员工折扣，当前您的折扣如下<br />
        2.电费折扣：{{ formatDiscoundInfo(userRoleInfo.priceDiscount) }}<br />
        2.服务费：{{ formatDiscoundInfo(userRoleInfo.serviceDiscount) }}<br />
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref, watch, onMounted, computed } from "vue";
import { fetchStationInfo } from "../../utils/api/teld";
import { getFeeInfo } from "../../utils/helper";
import useUserStore from "@/store/user.js";

const userStore = useUserStore();
const userRoleInfo = computed(() => {
  return userStore.userRoleInfo;
});
console.log("useuserRoleInforRoleInfo:", userRoleInfo.value);

const show = ref(false);
const priceTimeShow = ref(false);
const arr = ref([]);
const priceList = ref([
  { label: "电费", price: "0.0", unit: "度", time: "00:00-24:00" },
  { label: "停车服务费", price: "0.0", unit: "小时", time: "00:00-24:00" },
  { label: "超时占用费", price: "0.0", unit: "小时", time: "前2小时免费" },
]);

const priceData = ref();
const handleOpenTip = () => {
  show.value = true;
};
const handleOpenTimeTip = (type) => {
  if (type === "电费") {
    arr.value = getFeeInfo(priceData.value.ElectricityFee, "arr");
  } else if (type === "停车服务费") {
    arr.value = getFeeInfo(priceData.value.ServiceFee, "arr");
  }

  priceTimeShow.value = true;
};
/**
 * 格式化折扣信息
 */
const formatDiscoundInfo = (discount) => {
  discount = discount * 1;
  if (typeof discount !== "number" || isNaN(discount)) {
    return "无折扣";
  }

  if (discount > 0 && discount < 1) {
    return discount * 10 + "折";
  } else if (discount === 1) {
    return "无折扣";
  } else if (discount > 1) {
    return discount + "倍";
  } else if (discount === 0) {
    return "免费";
  }
};
watch(
  () => priceData.value,
  (n) => {
    console.log("price-data:", n);
    const obj = priceList.value.find((item) => item.label === "电费");
    obj.price = getFeeInfo(n?.ElectricityFee, "fee");
    obj.time = getFeeInfo(n?.ElectricityFee, "time");
    const obj2 = priceList.value.find((item) => item.label === "停车服务费");
    obj2.price = getFeeInfo(n?.ServiceFee, "fee");
    obj2.time = getFeeInfo(n?.ServiceFee, "time");
  }
);
onMounted(() => {
  fetchStationInfo().then((res) => {
    priceData.value = res;
  });
});
</script>

<style lang="scss" scoped>
@import "../../style/common.scss";
.price-info {
  width: 100%;
  .price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 10px;
    .price-item {
      font-size: 14px;
      color: $color-primary;

      .number {
        color: $color-red;
        font-size: 20px;
        font-weight: bold;
      }
      .unit {
        font-size: 12px;
        color: $color-light;
      }
    }
    .price-item-label {
      display: flex;
      width: 120px;
    }
    .price-item-content {
      flex: 2;
    }
  }
}
.pop-container {
  padding: 20px 15px;
  .pop-title {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
  }
  .pop-tip {
    margin-top: 10px;
    color: rgba(213, 155, 124, 1);
    font-size: 12px;
  }
  .label {
    color: rgb(183, 183, 183);
    font-size: 12px;
    margin: 20px 0 10px;
  }
  .paragraph {
    font-size: 12px;
  }
}
.table-title {
  font-size: 12px;
  margin: 20px 0 10px;
}
/* 表格样式 */
.table {
  display: table;
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  font-size: 12px;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 1px solid #ccc; /* 边框 */
  padding: 10px; /* 内边距 */
  text-align: left; /* 文本对齐方式 */
}
.price-time-data {
  padding: 3px 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  &:first-child {
    padding-top: 10px;
  }
  .price-time-data-time,
  .price-time-data-fee {
    flex: 1;
    text-align: center;
    font-size: 14px;
  }
  .price-time-data-fee {
    color: $color-red;
    font-weight: bold;
    font-size: 16px;
  }
}
.discount-tip-container {
  font-size: 14px;
  color: #3f3f3f;
  padding: 10px 16px;
  .label {
    margin-bottom: 8px;
    color: #000;
  }
  .paragraph {
    line-height: 1.4;
  }
}
</style>
